<template>
	<view>
		<view class="header">
			<uni-search-bar placeholder="输入城市名进行搜索"
			 @confirm="search" :radius="100" clearButton="none"
			 cancelButton="always" @cancel="clear"></uni-search-bar>
		</view>
		<view class="city">
			<uni-indexed-list :options="list" v-if="isSeach"
			:showSelect="false" @click="bindClick"></uni-indexed-list>
			
			<view class="res_city" v-else 
			v-for="(item,index) of searchRes" 
			:key="index" @click="goback(item)">
				<view>
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniIndexedList from "@/components/uni-indexed-list/uni-indexed-list.vue"
	import http from '@/api/http.js'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				list:[],
				isSeach:true,
				all:[],
				searchRes:[]
			};
		},
		components:{
			uniSearchBar,
			uniIndexedList
		},
		methods:{
			...mapMutations(['changeCurrentcity']),
			async search(e){
				this.isSeach = false;
				let res = await http.searchCity(e.value);
				console.log(res);
				this.searchRes = res;
			},
			bindClick(e){
				console.log(e);
				this.changeCurrentcity(e.item.name);
				uni.navigateBack({
					url:'../chooseaddress/chooseaddress'
				});
			},
			clear(){
				this.isSeach = true;
			},
			goback(item){
				console.log(item);
				this.changeCurrentcity(item);
				uni.navigateBack({
					delta: 1
				});
			}
		},
		async onLoad() {
			let res = await http.getCity();
			this.list = res;
		},
	}
</script>

<style lang="scss">
	.header{
		position: fixed;
		z-index: 100;
		width: 750rpx;
		box-sizing: border-box;
		padding: 15rpx 25rpx;
		background: $themeColor;
		.uni-searchbar{
			background: $themeColor !important;
		}
	}
	.city{
		padding-top: 132rpx;
	}
	.uni-searchbar__cancel{
		color: #FFFFFF !important;
	}
	.res_city{
		padding-left: 30rpx;
		view{
			box-sizing: border-box;
			padding: 30rpx 30rpx 30rpx;
			height: 50px;
			border-bottom-style: solid;
			border-bottom-width: 1px;
			border-bottom-color: #c8c7cc;
			font-size: 14px;
		}
	}
</style>
